<html>

<head>
  <title>Express</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/stylesheets/style.css">
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>Express</h1>
    <p @click="scanCode">扫描二维码</p>
  </div>


  <script>
    // http://funny.applinzi.com/jsapi
    // http://localhost:3000/jsa pi
    new Vue({
      el: "#app",
      mounted() {
        this.wxconfig();
      },
      methods: {
        wxconfig() {
          axios.get('http://funny.applinzi.com/jsapi', {
            params: {
              url: encodeURIComponent(location.href.split('#')[0])
            }
          }).then(result => {
            // let {
            //   nonceStr,
            //   timestamp,
            //   signature,
            //   appId
            // } = result.data;

            console.log(result.data);

            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              ...result.data,
              // appId, // 必填，公众号的唯一标识
              // timestamp, // 必填，生成签名的时间戳
              // nonceStr, // 必填，生成签名的随机串
              // signature, // 必填，签名
              jsApiList: [
                'scanQRCode'
              ] // 必填，需要使用的JS接口列表
            })
          })
        },
        scanCode() {
          wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            }
          });
        }

      }
    })
  </script>
</body>

</html>